<template>
    <div class="head">
        <van-nav-bar title="推广中心" left-arrow @click-left="onClickLeft" />
    </div>
    <div style="height: 50px;"></div>
    <div class="comment">
        <div class="user_data">
            <div class="head_img">
                <img :src="userData.img" alt="">
            </div>
            <div class="head_word">
                <strong>{{ userData.nickname }}</strong>
                <p>推荐人：无</p>
            </div>
        </div>
        <div class="user_price" @click="jump('/withdraw')">
            <div class="price_top">
                <strong>可提现收益<van-icon name="arrow" /></strong>
                <p style="color: #019de9;font-size: 24px;font-weight: bold;line-height: 2;">{{ userData.canwithdraw != null
                    ? userData.canwithdraw : 0 }}</p>
            </div>
            <div class="price_botton">
                <div class="price">
                    <p>待审核佣金</p>
                    <p style="color: #019de9;font-size: 24px;">{{ userData.audit != null ? userData.audit : 0 }}</p>
                </div>
                <div class="price">
                    <p>待汇总佣金</p>
                    <p style="color: #019de9;font-size: 24px;">{{ userData.commission != null ? userData.commission : 0 }}
                    </p>
                </div>
            </div>
        </div>
        <div class="title_box">
            <van-cell icon="friends" title="我的团队" is-link @click="jump('/group')"/>
        </div>
        <div class="title_box">
            <van-cell icon="friends" title="推广二维码" is-link value="点击推广" @click="status = true" />

        </div>
        <div class="title_box">
            <van-cell icon="friends" title="提现明细" is-link  @click="jump('/particulars')"/>
        </div>
    </div>
    <div class="up_box" v-show="status == true">
        <div class="black" @click="status = false"></div>
        <div class="up_com">
            <img src="../assets/friend.jpg" alt="">
            <canvas ref="can" id="myCanvas"></canvas>
        </div>
        <img src="../assets/x.png" alt="" id="close" @click="status = false">
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ref } from 'vue';
import { onMounted } from 'vue';
const router = useRouter()
let userId = sessionStorage.getItem('userId')
let scienceData = JSON.parse(sessionStorage.getItem('scienceData'))
const userData = ref({})
const onClickLeft = () => history.back();
const status = ref(false)
const can = ref()
axios({ //请求用户信息
    url: "/api/user/userinfo", // url
    params: {
        // 参数
        id: userId
    },
})
    .then(function (res) {
        console.log(res); // 成功回调
        userData.value = res.data.user
        console.log(userData.value);
    })
    .catch(function (err) {
        console.log(err); // 失败回调
    });
function jump(site) { //跳转事件
    router.push({
        path: site,
    })
}
onMounted(() => {
    axios({ //请求二维码接口
        url: "/api/personal/getWxcode", // url
        params: {
            // 参数
            userid: userId,
            scienceid: scienceData.id
        },
    })
        .then(function (res) {
            console.log(res); // 成功回调
            //接口拿来的数据用变量 imgbase64=接口数据                                                                                                                                                                                   
            var imgbase64 = res.data;
            let img = new Image();
            img.src = imgbase64;
            let myCanvas = document.getElementById("myCanvas").getContext("2d");

            img.onload = () => {
                myCanvas.drawImage(img, 0, 0, 300, 150);
            };
        })
        .catch(function (err) {
            console.log(err); // 失败回调
        });
})


</script>

<style scoped>
.head {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
}

.up_box {
    width: 100%;
    height: 100vh;
    position: absolute;
    bottom: 0;
}

.black {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

#close {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 20%;
    left: 80%;
}

.up_com {
    width: 300px;
    height: auto;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
}

.up_com img {
    width: 100%;
    height: auto;
}

.up_com canvas {
    width: 150px;
    height: 150px;

    position: absolute;
    top: 66%;
    left: 51%;
    transform: translate(-50%, -50%);
}

.comment {
    width: 100%;
    min-height: calc(100vh - 50px);
    height: auto;
    background-image: url("../assets/beijing.png");
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 20px 5% 0;
    background-color: #eeeeee;
}

.user_data {
    width: 100%;
    height: auto;
    display: flex;
    margin-bottom: 20px;
}

.head_img {
    width: 80px;
    height: 80px;
}

.head_img img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.head_word {
    line-height: 2.5;
}

.user_price {
    width: 100%;
    height: auto;
    background-color: white;
    border-radius: 10px;
    padding-bottom: 20px;
    box-shadow: 2px 2px 2px #dedede;
}

.price_top {
    width: 100%;
    height: auto;
    text-align: center;
    padding: 20px 0;
}

.price_botton {
    width: 100%;
    display: flex;

}

.price {
    width: 50%;
    height: auto;
    text-align: center;
}

.title_box {
    width: 100%;
    height: auto;
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2px 2px #dedede;

}</style>